<template>
  <view :class="theme">
    <view class="m-30 b-rounded-16 bg-section" style="box-shadow: 0 0 20rpx 0 rgba(0,0,0,0.1);">
      <view @click="uniNavigator({ url: '/pages/client/base/address?enabled_select_address=1' })" class="relative p-30">
        <block v-if="addressData.id">
          <label class="text-28">
            <text>{{ addressData.name }}</text>
            <text class="ml-30">{{ addressData.mobile }}</text>
          </label>
          <label class="mt-12 lh-60 color-16">
            {{ addressData.mergename }}
          </label>
        </block>

        <label v-else class="justify-center text-28">选择收货地址</label>

        <label class="absolute bg-primary h-50 w-120 justify-center top-0 right-0" style="border-radius: 16rpx 0;">
          <uv-icon size="36" :color="$config.COLOR_WHITE" name="edit-pen" />
          <text class="ml-4 color-base">修改</text>
        </label>
      </view>
      <view class="relative" style="border-top: 2rpx dashed rgba(151,151,151,0.3);">
        <view class="absolute w-40 h-40 b-rounded-50% bg-base"
          style="box-shadow: inset 0 0 20rpx 0 rgba(0,0,0,0.1); bottom: auto; right: auto; top: 50%; left: -20rpx; transform: translateY(-50%);" />
        <view class="absolute w-40 h-40 b-rounded-50% bg-base"
          style="top: 50%; right: 100%; bottom: auto; left: auto; transform: translate(10rpx, -50%);" />

        <view class="absolute w-40 h-40 b-rounded-50% bg-base"
          style="box-shadow: inset 0 0 20rpx 0 rgba(0,0,0,0.1); top: 50%; right: -20rpx; bottom: auto; left: auto; transform: translateY(-50%);" />
        <view class="absolute w-40 h-40 b-rounded-50% bg-base"
          style="top: 50%; right: auto; bottom: auto; left: 100%; transform: translate(-10rpx, -50%);" />
      </view>
      <block v-for="(section, sectionIndex) in orderInfo.goods_list" :key="sectionIndex">
        <view v-for="(item, index) in section.details" :key="index" class="pb-18 p-30"
          :style="{ borderTop: index ? `2px solid rgba(151,151,151,0.1)` : 'none' }">
          <view class="flex-row">
            <uv-image radius="16" width="200" height="200" :src="include(item.goods_img)" />
            <view class="flex-1 overflow-hidden ml-18 justify-around">
              <text class="multi-ellipsis text-28">{{ item.goods_name || "-" }}</text>
              <text class="ellipsis color-placeholder text-22">规格：{{ item.spec_text || "-" }}</text>
              <label class="items-baseline justify-between">
                <text class="color-stress fw-700">
                  <text class="text-36">{{ Number(item.price || 0).toFixed(2) }}</text>
                  <!-- <text class="ml-10">元</text> -->
                </text>
                <text class="ml-28 text-28 fw-700">
                  × {{ item.num || 0 }}
                </text>
              </label>
            </view>
          </view>
        </view>
      </block>
    </view>

    <view class="bg-section b-rounded-16 m-30 p-30">
      <label class="text-28 justify-between">
        <text>商品金额</text>
        <text>{{ Number(orderInfo.total_goods_price || 0).toFixed(2) }}</text>
      </label>
      <label class="mt-30 text-28 justify-between">
        <text>运费</text>
        <text>{{ Number(orderInfo.total_post_fee || 0).toFixed(2) }}</text>
      </label>
      <label class="mt-30 text-28 justify-between">
        <text>实付金额</text>
        <text class="color-stress">{{ Number(orderInfo.total_price || 0).toFixed(2) }}</text>
      </label>
    </view>

    <view @click="submit" hover-class="op-[0.6]"
      class="flex-row justify-center items-center bg-primary b-rounded-16 fw-700"
      style="line-height: 100rpx; margin: 60rpx 30rpx 88rpx;">
      <uv-image width="40" height="40" src="/static/img/icon-buy.svg" />
      <text class="ml-12 color-base text-32">立即支付</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { watch, ref, computed } from "vue";
import { useStore } from "vuex";

const { theme, address, confirmOrder, shoppingCart } = useMapState(["theme", "address", "confirmOrder", "shoppingCart"]);
const { $config = {} } = getApp().globalData || {};
const store = useStore();

const orderInfo = ref<AnyObject>({});

const addressData = computed(() => address.value || orderInfo.value.address || {});

watch(address, (n, o) => getOrderDetails());

onLoad(() => getOrderDetails())

const getOrderDetails = () => {
  uni.request({
    url: "/buyDetails",
    data: {
      address_id: addressData.value.id,
      goods_data: JSON.stringify(confirmOrder.value)
    },
    success({ data }: any) {
      orderInfo.value = data;
    }
  });
}

const submit = () => {
  if (!addressData.value.id) {
    return uni.showToast({ title: "请选择收货地址", icon: "none" });
  }
  uni.request({
    url: "/orderCreate",
    data: {
      goods_data: JSON.stringify(confirmOrder.value),
      address_id: addressData.value.id
    },
    success({ data }: any) {
      store.commit("setState", {
        key: "shoppingCart",
        value: shoppingCart.value.filter((item: any) => !item.checked)
      });
      uni.setStorage({
        key: "payInfo",
        data: {
          amount: Number(orderInfo.value.total_price || 0).toFixed(2),
          description: "商品结算",
          order_type: 1,
          order_id: data.order_id
        },
        success() {
          uni.redirectTo({
            url: "/pages/client/mall/pay"
          });
        }
      });
    }
  });
}

</script>

<style lang="scss" scoped>
// scss
</style>